<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jquery-3.4.1.min.js"></script>
    <style>

    </style>
</head>

<body>
    <button class="btn_1">按钮1</button>
    <button class="btn_2">按钮2</button>
    <button class="btn_3">按钮3</button>
    <button class="btn_4">按钮4</button>
    <div class="div1">
        <ul>
            <li class="li1"><a href="httml://baidu.com">百度一下</a></li>
            <li class="li2"><a href="https://yeqt.top">我的博客</a></li>
        </ul>
    </div>

    <div class="div2">
        <h1 class="myh1">h1标题</h1>
        <h2>h2标题</h2>
        <span>span标签</span>
        <div>div盒子</div>
        <p>这是不是一个段落？？</p>
    </div>



    <script>
        $(function () {

            //祖先----parent
            // $(".btn_1").click(function () {
            //     console.log("返回父元素");
            //     console.log($(".div1 li a").parent());
            // })
            // $(".btn_2").click(function () {
            //     console.log("返回所有父元素");
            //     console.log($(".div1 ul li a").parents());
            // })
            // $(".btn_3").click(function () {
            //     console.log("使用可选参数过滤搜索");
            //     console.log($(".div1 ul li a").parents("ul"));
            // })
            // $(".btn_4").click(function () {
            //     console.log("返回介于两个元素之间的所有元素");
            //     console.log($(".div1").parentsUntil("a"));
            // })


            //后代--------children
            // $(".btn_1").click(function () {
            //     console.log("返回子元素");
            //     $(".div1").children().css({"border":"3px solid red"})

            // })
            // $(".btn_2").click(function () {
            //     console.log("搜索子元素li");
            //     $(".div1 ul").children("li.li1").css({"border":"3px solid red"})
            // })
            // $(".btn_3").click(function () {
            //     console.log("返回后代的所有元素");
            //     $(".div1").find("li").css({"color":"red","border":"5px solid blue"})
            // })
            // $(".btn_4").click(function () {
            //     console.log("返回后代的所有子元素");
            // $(".div1").find("*").css({"border":"1px solid green"})
            // })

            //同胞----siblings----next
            // $(".btn_1").click(function () {
            //     //返回同胞元素,可选参数过滤
            //     $(".myh1").siblings("div").css({
            //         "border":"2px solid green"
            //     })
            // })

            // $(".btn_2").click(function () {
            //     //返回被选元素的下一个同胞元素
            //     $(".div2 span").next().css({
            //         "color":"green",
            //         "border":"1px solid red"
            //     })
            // })
            // $(".btn_3").click(function () {
            //     $(".div2 h2").nextAll().css({
            //         "color":"red",
            //         "border":"5px solid green"
            //     })
            // })
            // $(".btn_4").click(function () {
            //     //返回两个元素之间的所有同胞元素
            //     $(".div2 h1").nextUntil(".div2 p").css({
            //         "color":"#e44d26",
            //         "border":"2px solid red"
            //     })
            // })

            $(".btn_1").click(function () {
                //first()返回首个元素
                $(".div1 ul li").first().css({"color":"red"})
            })

            $(".btn_2").click(function () {
                //last  返回最后一个元素
                $(".div1 ul li").last().css({"color":"green"})
                $(".div1 ul li").last().children().css({"color":"red"})
            })
            $(".btn_3").click(function () {

            })
            $(".btn_4").click(function () {

            })

            // $(".btn_1").click(function () {

            // })

            // $(".btn_2").click(function () {

            // })
            // $(".btn_3").click(function () {

            // })
            // $(".btn_4").click(function () {

            // })

        })


    </script>
</body>

</html>